<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="/css/log.css">
    <style>
        body,
        html {
            background: black;
            position: relative;
            height: 100%;
        }

        .logs {
            width: 700px;
            position: absolute;
            overflow-y: auto;
            border-radius: 4px;
            height: auto;
            z-index: 100;
            top: 20px;
            left: 50%;
            margin-left: -350px;
            color: #fff;
            font-weight: bold;
            height: auto;
            font-size: 12px;
            border: solid 1px #eee;
            padding: 40px 10px;
            text-shadow: 0px 0px 20px #fff;
            background: rgba(0, 0, 0, 0.5);
            background: #0000ff50;
        }

        .logo {
            position: absolute;
            left: 50%;
            margin-left: -349px;
            background: blue;
            padding: 3px;
            top: 0px;
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            top: 22px;
            z-index: 999;

        }

        .logs.showAll {
            bottom: 20px;
            transition: all ease 0.5s;
        }

        .logs.showAll:hover {
            -webkit-backdrop-filter: saturate(180%) blur(10px);
            backdrop-filter: saturate(180%) blur(10px);

        }
    </style>
</head>

<body>
    <div class="logo"><span>run-logs:[&lt;/&gt;]zh-cn</span></div>
    <div class="logs showAll">
        等待任务运行中...
        <div class="logsItem">
            {{each logs}}
            <p>{{$value}}</p>
            {{/each}}

        </div>
    </div>
    <div class="roate-container">
        <div class="screen-bg"></div>
        <div id="roate1">
            <div class="roate-item icon-roate-1"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-roate-2"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-roate-3"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-roate-4"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
        </div>
        <div id="roate2">
            <div class="roate-item icon-sq-1"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item icon-sq-2"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
            <div class="roate-item"></div>
        </div>
    </div>
    <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
    <script src="/js/log.js"></script>
    <script>
        $(function () {
            // $(".logs").animate({width:'700px'},"show");
            function getlogs() {
                $.ajax({
                    //提交数据的类型 POST GET
                    type: "GET",
                    //提交的网址
                    contentType: 'application/json',
                    url: "/logs",
                    //提交的数据   该参数为属性值类型的参数
                    //（和url?Name="sanmao"&Password="sanmapword"一样）后台若为SpringMVC接受，注明@RequestParam
                    data: "",
                    //返回数据的格式
                    datatype: "JSON",//"xml", "html", "script", "json", "jsonp", "text".

                    success: function (data) {
                        // $(".logs").append("<div>asdasd</div>")
                        // console.log(data)
                        // $()
                        var html = "";
                        if (data.logs && data.show) {
                            if (Object.prototype.toString.call(data.logs) == "[object Array]") {
                                for (j = 0, len = data.logs.length; j < len; j++) {
                                    // $(".logs").append("<p>"+data.logs[j]+"</p>");
                                    html += "<p>"+ data.logs[j] + "</p>";
                                }
                            } else {

                                // "<p>"+data.logs[j]+"</p>"
                                // $(".logs").append("<p>"+data.logs+"</p>")
                            }



                        }
 
                        $(".logsItem")[0].innerHTML=html;

                    },
                    //调用出错执行的函数
                    error: function () {
                        //请求出错处理
                    }
                });
            }

            var logsTime = setInterval(getlogs, 2000);

            // $(".toggle").click(function(){
            //     alert('asdad')
            //     // if($('.logs').hasClass('showAll')){
            //     //     $('.logs').removeClass('showAll')
            //     //     // $(this).text('展开')
            //     // }else{
            //     //     $('.logs').addClass('showAll')
            //     //     // $(this).text('收起')
            //     // }


            // })

        })

    </script>
</body>

</html>